<template>
	<view style="height: 100vh;position: relative; background-color: #1f2025;" class="content">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top">
				<cu-custom :isBack="true" :bgColor="'bg-080808'" :backColor="'text-white'">
					<block slot="backText">
						<view class="text-white ">
							拼车管理
						</view>
					</block>
				</cu-custom>
				<view id="head" class="" style="background-color: #080808;color: #fff;font-size: 26rpx;">
					<!-- <van-search @search="search" @change="searchChange" shape="round" background="#080808"
						placeholder="输入剧本名,快速找到哈" /> -->
					<view class="flex justify-between"
						style="background-color: #080808;color: #b8b8b8;font-size: 26rpx;position: relative;">
						<scroll-view scroll-x class="nav">
							<view class="cu-item" :class="item.select==TabCur?'text-white cur':''"
								v-for="(item,index) in tabList" :key="index" @click="tabSelect" :data-id="item.select">
								{{item.name}}
							</view>
						</scroll-view>
						<!-- <view class="text-center" style="width: 140rpx;line-height: 90rpx;" @click="show=!show">
							<text class="cuIcon-flashlightopen"></text>筛选
						</view> -->
						<view v-show="show" @click="show=false"
							style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.4);position: fixed;top: 0;left: 0;z-index: 999;">
						</view>
						<uni-transition mode-class="slide-right"
							:styles="{width: '100%',height: '700rpx','background-color': '#fff',position: 'absolute',top: '90rpx',left: 0,'z-index': '1000',overflow: 'hidden'}"
							:show="show">
							<scroll-view scroll-y="true" style="height: 620rpx;">
								<view>
									<view class="padding" v-for="(bigClass,index) in classList" :key="index">
										<view class="text-black">{{bigClass.big_name}}</view>
										<view class="flex flex-wrap margin-top">
											<view class="item cu-tag radius margin-top-xs margin-left-xs text-black"
												:class="{'bg-yellow':array[0].SmallClassId==smallClass.id || array[1].SmallClassId==smallClass.id || array[2].SmallClassId==smallClass.id || array[3].SmallClassId==smallClass.id ||array[4].SmallClassId==smallClass.id || array[5].SmallClassId==smallClass.id || array[6].SmallClassId==smallClass.id || array[7].SmallClassId==smallClass.id || array[8].SmallClassId==smallClass.id}"
												style="width: 150rpx;overflow: hidden;"
												v-for="(smallClass,index1) in bigClass.smallClasses" :key="index1"
												@click="selectTag(index,smallClass.id)">
												{{smallClass.small_name}}
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
							<view style="height: 80rpx;" class="">
								<button @click="removeArray" class="cu-btn  bg-gray lg"
									style="width: 50%;border-radius: 0;">重置</button>
								<button @click="submitSx" class="cu-btn  bg-yellow lg"
									style="width: 50%;border-radius: 0;">确定</button>
							</view>
						</uni-transition>
					</view>

				</view>
			</view>

			<view class="grarg" style="background-color: #1f2025;">
				<view class="cu-card">
					<view @click="$goPage('./AppointmentProgress?id='+item.id)" class="cu-item shadow padding-sm"
						style="background-color: #292929;position: relative;" v-for="(item,index) in dataList"
						:key="index">
						<image v-if="item.status==1" src="../../static/icon/zd.png" class="zd" mode=""></image>
						<view class="flex justify-start">
							<image :src="$isHttp(item.picture)"
								style="width: 148rpx;height: 210rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class=" margin-left-sm" style="width: 520rpx;">
								<view class="flex justify-between margin-top-xs">
									<view class="text-bold text-white">{{item.name}}</view>
									<view class="cu-btn sm round bg-yellow" v-if="(TabCur==2 || TabCur==1) && item.people>item.Joincount">添加玩家</view>
								</view>
								<view class="margin-top-sm">
									<view v-for="(item1,index1) in item.smallClasses" :key="index1" v-if="index1<6"
										class="cu-tag sm round" style="background-color: #3f3f3f;color: #b2b1b6;">
										{{item1.small_name}}
									</view>
								</view>
								<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
									<view class="flex justify-start align-center">
										<text class="cuIcon-friendfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{item.sex_type}}</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-timefill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{item.hour}}小时</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-selectionfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{item.difficulty}}</view>
									</view>
								</view>
								<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
									{{item.date}} {{item.week}} {{item.time}}
								</view>
								<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
									需{{item.people}}人  已组{{item.Joincount}}人
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</z-paging>
		<van-popup :show="priceShow" round @close="hiddenPop">
			<view class="padding">
				<view class="text-center">设置剧本价格</view>
				<input type="number" class="text-lg solid radius margin-tb-sm" v-model="price" placeholder="请输入剧本价格"
					placeholder-style="font-size:24rpx" @input="checkNum($event)" />
				<button type="default" class="cu-btn block" @click="playCrud">添加</button>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin],
		data() {
			return {
				tabList: [{
					'name': '在拼车队',
					'select': 2
					}, {
					'name': '待玩车队',
					'select': 1
					}, {
					'name': '已玩车队',
					'select': 0
					}, {
					'name': '解散车队',
					'select': 3
					},
				],
				show: false, //筛选弹框控制
				priceShow: false,
				classList: [], //分类列表
				dataList: [], //剧本列表
				searchvalue: '', //搜索关键词
				TabCur: 2, //tab切换
				scrollLeft: 0,

				array: [], //筛选条件对象
				arrayVal: [], //筛选条件id

				price: '',
				playId: '',
				add_status: '',
				index: '',
			};
		},
		onLoad() {
			this.getPlayClass()
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				this.$u.adminApi.getOrder({
					page: pageNo,
					number: pageSize,
					storeId: this.vuex_bussinessId,
					select: this.TabCur
				}).then(res => {
					this.$refs.paging.complete(res.data.list);
				})
			},
			getPlayClass() {
				this.$u.api.getPlayClass().then(res => {
					this.classList = res.data
				})
			},
			search(e) {
				this.$refs.paging.reload()
			},
			searchChange(e) {
				this.searchvalue = e.detail
			},
			selectTag(index, SmallClassId) {
				//1. 首先我们要得到这个对象
				var tina = this.array.filter((s) => {
					return s.index == index;
				});
				var tina1 = this.array.filter((s) => {
					return s.SmallClassId == SmallClassId;
				});
				//2. 其次得到这个对象在数组中对应的索引
				var key = this.array.indexOf(tina[0])
				//3. 如果存在则将其删除，key > -1 代表存在
				key > -1 && this.array.splice(key, 1)
				if (tina1[0] == undefined) {
					this.array.push({
						index,
						SmallClassId
					})
				} else {
					//2. 其次得到这个对象在数组中对应的索引
					var key1 = this.array.indexOf(tina1[0])

					//3. 如果存在则将其删除，key > -1 代表存在
					key1 > -1 && this.array.splice(key1, 1)
				}

				// 冒泡排序（从后向前）
				function sort(arr) {
					for (var j = 0; j < arr.length - 1; j++) {
						//两两比较，如果前一个比后一个大，则交换位置。
						for (var i = 0; i < arr.length - 1 - j; i++) {
							if (arr[i].index > arr[i + 1].index) {
								var temp = arr[i];
								arr[i] = arr[i + 1];
								arr[i + 1] = temp;
							}
						}
					}
				}
				sort(this.array)
				this.arrayVal = []
				for (var i = 0; i < this.array.length; i++) {
					this.arrayVal.push(this.array[i].SmallClassId)
				}

				console.info('1', this.array)
				console.info('2', this.arrayVal)
			},
			removeArray() {
				this.array = []
				this.arrayVal = []
			},
			submitSx() {
				this.hiddenPop()
				this.$refs.paging.reload()
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.$refs.paging.reload()
			},
			async playCrud(id, add_status, index) {
				if (add_status != undefined) {
					this.playId = id
					this.add_status = add_status
					this.index = index
				}
				if (!this.priceShow && add_status === 0) {
					this.priceShow = true
					return
				}
				let res
				if (this.add_status === 0) {
					res = await this.$u.adminApi.addPlay({
						playId: this.playId,
						storeId: this.vuex_bussinessId,
						price: this.price,
					})
					this.priceShow = false
				} else {
					res = await this.$u.adminApi.deletestorePlay({
						playId: this.playId,
						storeId: this.vuex_bussinessId,
					})
					this.$refs.paging.reload()
				}
				if (res.code === 200) {
					this.$successToast(res.message)
				} else {
					this.$textToast(res.message)
				}
			},
			hiddenPop() {
				this.show = false
				this.priceShow = false
			},
			// 实时监听input输入为数字
			checkNum(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				if (!val) {
					this.price = '';
					return
				}
				var reg = /[^\d.]/g

				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// // 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				this.$nextTick(() => {
					this.price = val;
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.zd {
		position: absolute;
		top: 0;
		left: 0;
		width: 60rpx;
		height: 55rpx;
		z-index: 1;
	}

	// .grarg {
	// 	position: absolute;
	// 	top: 225rpx;
	// 	bottom: 100rpx;
	// }

	.box_whbrc {
		width: 90rpx;
		height: 60rpx;
		border-radius: 30rpx;
		// background-color: #cfa526;
		margin-right: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.bgc_cfa526 {
		background-color: #cfa526;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
	}
</style>
